<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('redis监控')"/>
    <link href="/admin/css/other/console2.css" rel="stylesheet"/>
    <style>
        .pear-text {
            font-size: 16px !important;
        }
        .more{
            cursor: pointer;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md7">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    监控数据
                </div>
                <div class="layui-card-body">
                    <div id="redis_line" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md5">
        <div class="layui-card">
            <div class="layui-card-header" style="display: flex;justify-content: space-between;align-items: center">
                <span>服务信息</span>
                <span lay-on="more" class="more layui-flow-more">更多</span>
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">端口</div>
                            <div class="count pear-text text" id="port"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">运行天数</div>
                            <div class="count pear-text" id="uptime_in_days"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">运行秒数</div>
                            <div class="count pear-text text" id="uptime_in_seconds"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">客户端数</div>
                            <div class="count pear-text" id="clients"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">阻塞客户端</div>
                            <div class="count pear-text" id="blocked_clients"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">使用CPU</div>
                            <div class="count pear-text" id="used_cpu_sys"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">Key数量</div>
                            <div class="count pear-text" id="dbSize"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">Redis版本</div>
                            <div class="count pear-text text" name="version"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">运行模式</div>
                            <div class="count pear-text text" name="redis_mode"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">操作系统</div>
                            <div class="count pear-text text" name="os"></div>
                        </div>
                    </div>

                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">使用内存</div>
                            <div class="count pear-text text" name="used_memory_human"></div>
                        </div>
                    </div>

                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">内存配置</div>
                            <div class="count pear-text text" name="maxmemory_human"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">AOF状态</div>
                            <div class="count pear-text text" name="aof_enabled"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">RDB状态</div>
                            <div class="count pear-text text" name="rdb_bgsave_in_progress"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">集群启用</div>
                            <div class="count pear-text text" name="cluster_enabled"></div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card2">
                            <div class="title">网络KPS</div>
                            <div class="count pear-text" name="instantaneous_ops_per_sec"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">详细信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    <li>
                        <p>配置文件路径：<span name="config_file" /></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer"/>
<script>
    let prefix = "/monitor";
    layui.use(['http', 'echarts', 'util',  'jquery', 'count', 'common'], function () {
        let $ = layui.jquery,
            http = layui.http,
            util = layui.util,
            count = layui.count,
            common = layui.common;
        let echarts = layui.echarts

        util.on({
            more:function (){
                layer.msg("尽请期待")
            }
        })

        let result = {}
        let arrX = ['00:00','00:05']
        let arr1 = [0,0]
        let arr2 = [0,0]
        loadData()
        changeData(echarts,arrX,arr1,arr2)
        setInterval(loadData,7*1000)

        function loadData(){
            let hm = common.getDateStr().ms
            common.pushArr(arrX,hm)
            http.get('/monitor/redis/get-monitor-info', {}).then(res => {
                result = res.data
                let dbSize = result.dbSize
                let info = result.info
                let version = info.redis_version // 版本
                let port = info.tcp_port // 端口
                let clients = info.connected_clients  // 客户端连接数
                let blocked_clients = info.blocked_clients  // 阻塞的客户端数
                let used_memory_human = info.used_memory_human
                let redis_mode = info.redis_mode
                let os = info.os
                let uptime_in_seconds = info.uptime_in_seconds // 启动到现在的时长
                let uptime_in_days = info.uptime_in_days // 启动到现在的天数
                let used_cpu_sys = info.used_cpu_sys // 使用CPU
                let aof_enabled = info.aof_enabled // aof 状态
                let rdb_bgsave_in_progress = info.rdb_bgsave_in_progress // RDB 状态
                let maxmemory_human = info.maxmemory_human // 内存配置
                let instantaneous_ops_per_sec = info.instantaneous_ops_per_sec // ops
                let cluster_enabled = info.cluster_enabled // 集群启用
                let config_file = info.config_file // 配置文件路径

                common.pushArr(arr1,parseInt(clients))
                common.pushArr(arr2,dbSize)

                // 文本
                setSpanText('config_file',config_file)
                setText('version', version);
                setText('redis_mode', redis_mode);
                setText('os', os);
                setText('config_file', config_file);
                setText('used_memory_human', used_memory_human);
                setText('maxmemory_human', maxmemory_human);
                setText('instantaneous_ops_per_sec', instantaneous_ops_per_sec);
                setText('aof_enabled', aof_enabled === "1" ? '开启' : '关闭');
                setText('rdb_bgsave_in_progress', rdb_bgsave_in_progress === "1" ? '开启' : '关闭');
                setText('cluster_enabled', cluster_enabled === "1" ? '开启' : '关闭');
                // 数值
                startNum('port', parseInt(port))
                startNum('clients', parseInt(clients))
                startNum('uptime_in_seconds', parseInt(uptime_in_seconds))
                startNum('blocked_clients', parseInt(blocked_clients))
                startNum('dbSize', dbSize)
                startNum('uptime_in_days', parseInt(uptime_in_days))
                startNum('used_cpu_sys', parseFloat(used_cpu_sys), 2)
            })
            changeData(echarts,arrX,arr1,arr2)
        }

        /**
         * 开始数字滚动
         * @param id
         * @param num
         * @param bit
         */
        function startNum(id, num, bit = 0) {
            count.up(id, {
                time: 4000,
                num: num,
                bit: bit,
                regulator: 50
            })
        }

        /**
         * 设置文本
         * @param name
         * @param text
         */
        function setText(name, text) {
            $(`div[name=${name}]`).text(text)
        }

        function setSpanText(name, text) {
            $(`span[name=${name}]`).text(text)
        }
    });

    function search(isResetCurr) {
        let field = JSON.stringify($('#searchForm'));
        let options = {
            where: field
        };
        if (isResetCurr === true) {
            options.page = {
                curr: 1
            };
        }
    }
</script>
<script src="/admin/js/redis_line.js"></script>
</body>
</html>
